<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box flexWrapNo" @tap="makePhoneCall()">
					<image src="../../static/home/service-icon.png" class="service-icon"></image>
					<view class="text-box">
						<view>客服8:00～23:00</view>
						<view class="tel">{{phoneNumber||'未设置'}}</view>
					</view>
				</view>
				<view class="question-tips">常见问题</view>
				<view class="question-box">
					<view class="question-img">
						<image src="../../static/home/question1.png"></image>
					</view>
				</view>
				<view class="question-box">
					<view class="question-img" style="height: 450upx;">
						<image src="../../static/home/question2.png"></image>
					</view>
				</view>
				<view class="control-title flexWrapNo">
					<view class="dot">共享自助</view>
					<view>全屋智能语音控制</view>
				</view>
				<view class="question-box border1">
					<view class="question-title">如何播放音乐?</view>
					<view class="question-item flexWrapNo">
						<text class="dot"></text>
						<view class="item-right">
							<view class="text">呼叫"小爱同学"并说出想听的歌曲</view>
							<view>切歌,换歌,控制音量,全语音控制</view>
							<view>注意控制一些,不要扰民哦~</view>
						</view>
					</view>
				</view>
				<view class="question-box border1 border2">
					<view class="question-title">如何控制空调?</view>
					<view class="question-item flexWrapNo">
						<text class="dot"></text>
						<view class="item-right">
							<view class="text">呼叫"小爱同学"并说开启1号空调</view>
							<view>开空调,设温度,控制风量,全语音控制</view>
							<view>注意控制一些,不要着凉哦~</view>
						</view>
					</view>
				</view>
				<view class="tips1 flexWrapNo">
					<view class="dot">温馨提示</view>
					<view class="flexWarpColumn">
						<text>遇到满台,也可以扫码预约哦</text>
						<text>保存小程序还能提前一天预约</text>
					</view>
				</view>
				<view class="tips1 tips2 flexWrapNo">
					<view class="dot">共同监督</view>
					<view class="flexWarpColumn">
						<text>拒绝暴力击球,熄灯打球,</text>
						<text>舞枪弄棒等不文明行为</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				phoneNumber:""
			}
		},
		onLoad() {
			this.storeDetails();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:uni.getStorageSync('store_id'),
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991"
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.phoneNumber=data.customer_service_mobile||""
					}
				})
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.phoneNumber){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 18upx 36upx;
	}
	.top-box{
		justify-content: center;
		height: 168rpx;
		background: #1D1C5C;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.service-icon{
			width: 148upx;
			height: 66upx;
		}
		.text-box{
			font-size:20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F38217;
			margin-left: 20upx;
			.tel{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	.question-tips{
		width: 400upx;
		height: 120upx;
		line-height: 150upx;
		background: url("../../static/home/questionBg.png") no-repeat center/100% 100%;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding-left: 130upx;
		margin-top: 20upx;
	}
	.question-box{
		margin-top: 30upx;
		.question-title{
			width: 320rpx;
			height: 53rpx;
			line-height: 53upx;
			background: #008A32;
			border-radius: 36rpx 0rpx 97rpx 0rpx;
			color: #FFFFFF;
			font-size:36upx;
			font-weight: 500;
			text-indent: 30upx;
		}
		.question-img{
			height: 490upx;
		}
	}
	.border1{
		height: 222rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #399D26;
		.question-item{
			padding: 0 40upx;
			margin-top: 22upx;
			align-items: baseline;
			.dot{
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background: #FCA518;
				display: inline-block;
				margin-right: 24upx;
			}
			.item-right{
				color: #FCA518;
				font-size:28upx;
				font-weight: 600;
				line-height: 44upx;
				.text{
					color: #FFFFFF;
					font-size:32upx;
					font-weight: 600;
					margin-bottom: 4upx;
				}
			}
		}
	}
	.border2{
		border: 2rpx solid #8CB808;
		.question-title{
			background-color: #8CB808;
		}
	}
	.control-title{
		width: 426rpx;
		height: 62rpx;
		background: #FCA518;
		border-radius: 40rpx 0rpx 40rpx 0rpx;
		color: #FFFFFF;
		font-size:32upx;
		font-weight: 600;
		margin: 46upx auto;
		.dot{
			width: 76rpx;
			height: 62rpx;
			background: #0099DB;
			border-radius: 40rpx 0rpx 20rpx 0rpx;
			font-size:22upx;
			font-weight: 500;
			text-align: center;
			margin-right: 18upx;
			letter-spacing:10upx;
			padding-left: 12upx;
			border-right: 6upx solid #F38200;
		}
	}
	.tips1{
		width: 450rpx;
		height: 66rpx;
		background: #008129;
		border-radius: 40rpx 0rpx 40rpx 0rpx;
		color: #FFFFFF;
		font-size:24upx;
		font-weight: 600;
		margin: 46upx auto;
		.dot{
			width: 75rpx;
			height: 66rpx;
			background: #0099DB;
			border-radius: 40rpx 0rpx 40rpx 0rpx;
			font-size:24upx;
			font-weight: 500;
			text-align: center;
			margin-right: 18upx;
			letter-spacing:10upx;
			padding-left: 12upx;
			border-right: 8upx solid #F38200;
		}
	}
	.tips2{
		background: #005DAB;
		.dot{
			background: #E33C0B;
		}
	}
</style>
